<template>
  <div class="tmpl">
    <!-- 1.0 首页轮播图 -->
    <subimagesilder :imageList="imageList"></subimagesilder>

    <!-- 2.0九宫格组件 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/list">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新闻咨询</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/list">
            <span class="mui-icon mui-icon-email">
              <span class="mui-badge">5</span>
            </span>
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/list">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反馈</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">视频专区</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">联系我们</div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<!-- scoped 私有,局部 -->
<style scoped>
/**
    2.0 九宫格
    */
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
}

.mui-table-view.mui-grid-view .mui-table-view-cell {
  border-bottom: 0;
  border-right: 0;
}

.mui-icon {
  height: 50px;
  width: 50px;
}

.mui-icon.mui-icon-home {
  background-image: url("../../../statics/images/menu3.png");
  background-repeat: round;
  /**
            背景图像自动缩放直到适应且填充满整个容器。（CSS3）
        **/
}

.mui-icon.mui-icon-email {
  background-image: url("../../../statics/images/menu4.png");
  background-repeat: round;
}

.mui-icon.mui-icon-chatbubble {
  background-image: url("../../../statics/images/menu5.png");
  background-repeat: round;
}

.mui-icon.mui-icon-location {
  background-image: url("../../../statics/images/menu6.png");
  background-repeat: round;
}

.mui-icon.mui-icon-search {
  background-image: url("../../../statics/images/menu9.png");
  background-repeat: round;
}

.mui-icon.mui-icon-phone {
  background-image: url("../../../statics/images/menu10.png");
  background-repeat: round;
}

.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before {
  content: "";
}
</style>

<script>
import common from "../../tools/common.js";

//1.导入轮播子组件
import subimagesilder from "../subcomponent/subimagesilder.vue";

//es6新写法
export default {
  data() {
    return {
      imageList: []
    };
  },
  created() {
    console.log("home created...");
    this.getlunboData();
  },
  destroyed() {
    console.log("home destroyed");
  },
  methods: {
    //获取轮播图片的数据
    getlunboData() {
      //1.准备url
      const url = common.apihost + "api/v1/products";

      //2.发送请求
      this.$http.get(url).then(
        res => {
          for (let i = 0; i < 10; i++) {
            // console.log(res.body.products[i].price);
            // console.log(res.body.products[i].coverImg);
            this.imageList.push(res.body.products[i]);
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  },
  components: {
    subimagesilder //2.0 注册
  }
};
</script>